<template>
  <div style="background: #fff">
    <div class="header">
      <span style="font-size: 18px; font-weight: bolder">会员卡信息</span>
      <el-button size="small" @click="returned">返回</el-button>
    </div>
    <div class="mainBox">
      <el-descriptions>
        <el-descriptions-item label="Username"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="Telephone"
          >18100000000</el-descriptions-item
        >
        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
        <el-descriptions-item label="Remarks">
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Address"
          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
          Province</el-descriptions-item
        >
        <el-descriptions-item label="Username"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="Telephone"
          >18100000000</el-descriptions-item
        >
        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
        <el-descriptions-item label="Remarks">
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Address"
          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
          Province</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div class="buyCard">
      <div class="headerBox">消费记录</div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="发生时间" width="180" />
        <el-table-column prop="name" label="变化" width="180" />
        <el-table-column prop="name" label="金额" width="180" />
        <el-table-column prop="name" label="消费说明" />
        <el-table-column prop="name" label="状态" width="180" />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "../../router";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const returned: any = function () {
  router.push("/mainView/MembershipCard/shipcardOneView");
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0 15px;
  box-sizing: border-box;
}
.mainBox {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}
.buyCard {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}
.headerBox {
  width: 100%;
  height: 50px;
  padding-left: 15px;
  display: flex;
  justify-content: flex-start;
  background-color: #f3f3f3;
  align-items: center;
  font-size: 10px;
}
</style>
